<template>
  <el-main>
    <el-tabs v-model="activeTab" @tab-click="handleClick">
      <el-tab-pane :label="Text.basicInfo" name="basicInfo">
        <el-form ref="form" :model="shop" label-width="90px">
          <el-form-item :label="$t('shopColumn.id')">
            <el-input disabled v-model="shop.shopId"></el-input>
          </el-form-item>
          <el-form-item :label="$t('shopColumn.QR')">
            <qrcode :text="qrcode.value" :size='qrcode.size'></qrcode>
          </el-form-item>
          <el-form-item :label="$t('shopColumn.name')">
            <el-input v-model="shop.name"></el-input>
          </el-form-item>
          <el-form-item :label="$t('shopColumn.avatar')">
            <img id="avatar" :src="shop.avatar" alt="">
            <uploader @recieveNewImg='recieveNewImg'></uploader>
          </el-form-item>
          <el-form-item :label="$t('shopColumn.description')">
            <el-input type="textarea" v-model="shop.description"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveShopDetail">{{Text.save}}</el-button>
            <el-alert style="margin:15px 0" :title="Text.warning" type="warning"></el-alert>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="Text.changeEmail" name="changeEmail">敬请期待</el-tab-pane>
    </el-tabs>
  </el-main>
</template>
<script>
import uploader from '@/components/uploader/uploader'
import api from '@/API/index'
import qrcode from 'vue-qrcode-component'

export default {
  name: 'setting',
  data() {
    return {
      Text: {
        basicInfo: this.$t('settings.basicInfo'),
        save: this.$t('settings.save'),
        changeEmail: this.$t('settings.changeEmail'),
        warning: this.$t('settings.warning')
      },
      shopId: window.localStorage.shopId,
      activeTab: 'basicInfo',
      imageUrl: '',
      qrcode: {
        size: 120,
        value: `${window.location.protocol}//${window.location.host}/frontend/#/shop/${window.localStorage.shopId}`,
        logo: ''
      }
    }
  },
  computed: {
    shop() {
      return this.$store.state.shop
    }
  },
  created() {},
  mounted() {},
  methods: {
    handleClick() {},
    saveShopDetail() {
      api.SAVE_SHOP_INFO(this.shop).then(({ data }) => {
        if (data.status !== 200) {
          this.$store.dispatch('checkToken')
        }
        this.$message(data.msg)
      })
    },
    recieveNewImg(url) {
      this.shop.avatar = url
    }
  },
  components: {
    uploader,
    qrcode
  }
}
</script>
<style lang="less" scoped>
#avatar {
  width: 120px;
  height: 120px;
}
</style>
